<template>
    <el-dialog title="添加类型" v-model="props.visible" :before-close="beforeClose">
        <el-form :model="ownForm" label-width="100px">
            <el-form-item label="愿意类型">
                <el-input v-model="ownForm.name"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="ownForm.sort"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-switch v-model="ownForm.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import {
    defineProps,
    watch,
    ref,
    reactive,
    withDefaults,
    defineEmits,
} from "vue";
import type { Ref } from "vue";
import type { returnReasonlist } from "../../request/QmsAdminConreiller/index";
let props = withDefaults(
    defineProps<{
        visible: boolean;
        form: returnReasonlist;
    }>(),
    {
        visible: true,
    }
);
let originForm = ref({}) as Ref<returnReasonlist>; // 相当于一个空的备份
let ownForm = ref({}) as Ref<returnReasonlist>;

// console.log(props.visible);
// console.log(props.form);

watch(
    () => props.form,
    (newVal) => {
        ownForm.value = { ...newVal };
        originForm.value = { ...newVal };
    }
);

// 自定义事件
let emits = defineEmits<{
    (event: "cancel"): void;
    (event: "confirm", row: returnReasonlist): void;
}>();

let beforeClose = (done: any) => {
    // console.log("beforeClose");
    // console.log(done);
    // done()  // 一般我们不执行done 函数，应该由父级去监听自定义事件 然后关闭
    emits("cancel");
};

// 取消
let onCancel = () => {
    // 清空 实际上是点击取消的时候 ，将 ownForm 恢复成备份的值
    ownForm.value = { ...originForm.value };
    emits("cancel");
};

// 确定
let onConfirm = () => {
    // console.log(ownForm.value);
    // 将参数返回给父级 ，让父级发请求完成功能
    emits("confirm", ownForm.value);
};
</script>

<style lang="scss" scoped></style>
